<template>
	<z-nav-bar :title="title"></z-nav-bar>
	<view class="top-box">
		<view class="item flex_sbc">
			<view class="z-font-32">计划名称</view>
			<view class="flex_sbc input-box">
				<input
					v-model="plan.name"
					type="text"
					placeholder="请输入计划名称"
					placeholder-class="uni-placeholder"
				/>
			</view>
		</view>
		<view class="item flex_sbc">
			<view class="z-font-32">预计课时</view>
			<view class="flex_sbc input-box">
				<input
					v-model="plan.duration"
					type="number"
					placeholder="请输入课时"
					placeholder-class="uni-placeholder"
				/>
			</view>
		</view>
	</view>
	<view class="line-spacing" style="height: 20rpx"></view>
	<view class="add-box flex_sbc" style="border-color: #fff">
		<view class="z-font-32 text-w">新增课程</view>
		<view class="add" @click="selectCourse" style="width: 140rpx">选择课程</view>
	</view>
	<view class="z-font-32 uni-ml-32">
		<text class="uni-585C66">课程数</text>
		<text class="uni-orange">{{ plan.courseList ? plan.courseList.length : 0 }}</text>
		<text class="uni-585C66">个</text>
	</view>
	<view v-for="(course, index) in plan.courseList" :key="course.id" class="common-box">
		<view class="flex_sbc">
			<view class="z-font-32">{{ course.name }}</view>
			<uni-icons type="clear" color="#FF0000" size="22" @click="plan.courseList.splice(index, 1)"></uni-icons>
		</view>
		<view class="uni-color-grey z-font-24 uni-mt-8">
			<text>关联{{ course.relCourseCount }}问题</text>
			<text class="uni-ml-16">
				{{ course.relSchemeCount }}个解决方案
			</text>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { getPlanDetail, addPlan, editPlan, deletePlan } from '@/api/plan.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const plan = reactive({
	name: '',
	duration: '',
	relCourse: '',
	courseList: []
});
Object.assign(plan, uni.getStorageSync('edit-plan') || {});
const title = plan.id ? '编辑计划' : '添加计划';
plan.id && getPlanDetail(plan.id).then(res => {
	Object.assign(plan, res)
	console.log(plan);
})

function selectCourse() {
	uni.setStorageSync('select-course', plan.courseList);
	uni.navigateTo({
		url: '/pages/course/select/select',
		events: {
			selCourse: (data) => {
				plan.courseList = data;
			}
		}
	});
}

const buts = ref();

if (plan.id)
	buts.value = [
		{
			label: '确定',
			bgColor: 'uni-color-main-bg',
			width: '300'
		},
		{
			label: '删除计划',
			bgColor: 'uni-red-bg',
			width: '300'
		}
	];
else
	buts.value = [
		{
			label: '确定',
			bgColor: 'uni-color-main-bg'
		}
	];

function submit(e) {
	if (e) {
		uni.showModal({
			title: '删除提示',
			content: '确定要删除该计划吗？',
			success: res => {
				if (res.cancel) return
				deletePlan(plan.id).then(res => {
					eventChannel.emit('editDone', plan);
					uni.navigateBack();
				})
			}
		})
		return
	}
	if (!plan.name) return that.tools.alert('请输入计划名称');
	if (!plan.duration) return that.tools.alert('请输入课时');

	const postData = {
		name: plan.name,
		duration: plan.duration,
		relCourse: plan.courseList.map((item) => item.id).join(',')
	};
	const funName =  plan.id ? editPlan : addPlan
	funName(postData, plan.id).then((res) => {
		eventChannel.emit('editDone', plan);
		that.tools.alert(plan.id ? '编辑完成' : '添加成功')
		uni.navigateBack();
	});
}
function countScheme(qs) {
	let count = 0;
	// qs.
	if (!qs.length) return count;
	qs.forEach((item) => {
		if (item.questionSchemeList && item.questionSchemeList.length) count += item.questionSchemeList.length;
	});
	return count;
}
</script>

<style lang="scss">
@import '@/pages/course/edit/edit.scss';
</style>
